<template>
	<view>
		<!-- :tabHeight="45" -->
		<topbar>
			<view class="ml44 mr44">
				<view class="flex-align">
					<view class="mr30"><image :src="userInfo.uavatar || '/static/img/my/12.png'" mode="" style="width: 84rpx;height: 84rpx;border-radius: 50%;"></image></view>
					<view v-show="show == 1" class="" @click="$pub.go('/pages/friendGroupAdd/friendGroupAdd')">
						<image src="/static/img/friendGroup/baseline-camera_enhance-24px.svg" mode="" style="width: 48rpx;height: 48rpx;"></image>
					</view>
				</view>
			</view>
			<!--  -->
			<!-- margin-top: -20rpx; -->
			<view class="" style="background-color: #fff;margin-top: -30rpx;">
				<view class="flex-cen">
					<view class=""><u-tabs :list="list1" lineColor="#A332FF" lineWidth="50" @click="click"></u-tabs></view>
				</view>
			</view>
		</topbar>

		<view class="" style="padding-top: 200rpx;"></view>

		<!-- 		<view class="flex-cen" style="padding-top: 80px;">
			<view class=""><u-tabs :list="list1" lineColor="#A332FF" lineWidth="50" @click="click"></u-tabs></view>
		</view> -->

		<scroll-view scroll-y="true" style="height: 1500rpx;">
			<view>
				<!-- 				<view class="line"></view> -->
				<!-- tip -->
				<u-toast ref="uToast"><view class="u-slot-wrap">12312</view></u-toast>

				<!-- 推荐动态 -->
				<view class="ml24 mr30 mt14" v-if="show == 0">
					<!-- 1 -->
					<view class="flex mt40" v-for="(item, index) in recommendationlist" :key="index">
						<view class="mr16"><image :src="item.userAvatar || '/static/img/friendGroup/8.svg'" mode="" style="width: 90rpx;height: 90rpx;"></image></view>
						<view class="flex-column">
							<view class="flex-start">
								<view class="size_28 mr24">{{ item.userNick || '默认用户' }}</view>
								<view class="size_28 color_5E mr300">{{ $u.timeFrom(item.ucreateTime, false) }}</view>
								<view class=""><image src="/static/img/friendGroup/14.svg" mode="" style="width: 42rpx;height: 19rpx;"></image></view>
							</view>
							<view class="flex-column mt10">
								<view class="size_24 color_1b">{{ item.utitle }}</view>
								<view class="size_24 color_5E">定位：南山科技大厦附近</view>
							</view>
							<view class="mt20"><image :src="item.annexList[0] || '/static/img/friendGroup/45.svg'" mode="" style="width: 596rpx;height: 336rpx;"></image></view>
							<view class="flex mt14">
								<view class="flex mr72 ml30">
									<!-- $u.debounce -->
									<view class="" hover-class="animate__animated  animate__bounceIn">
										<!-- red -->
										<u-icon name="heart-fill" color="#fb4e5d"></u-icon>
									</view>
									<view class="ml10 size_24 color_5E">{{ item.ulikeNum }}</view>
								</view>
								<view class="flex mr60">
									<u-icon name="chat-fill"></u-icon>
									<view class="ml10 size_24 color_5E">512</view>
								</view>
								<view class="flex">
									<image src="/static/img/friendGroup/15.svg" mode="" style="width: 46rpx;height: 37rpx;"></image>
									<view class="ml10 size_24 color_5E">320</view>
								</view>
							</view>
						</view>
					</view>
					<!-- 2 -->
					<view class="flex mt40">
						<view class="mr16"><image src="/static/img/friendGroup/8.svg" mode="" style="width: 90rpx;height: 90rpx;"></image></view>
						<view class="flex-column">
							<view class="flex-start ">
								<view class="size_28 mr24">君君</view>
								<view class="size_28 color_5E mr300">30 min ago</view>
								<view class=""><image src="/static/img/friendGroup/14.svg" mode="" style="width: 42rpx;height: 19rpx;"></image></view>
							</view>
							<view class="flex-column"><view class="size_24">going to tell the kids that this was the best game back in the day</view></view>
							<view class="row flex-cen mt18">
								<view class="mr10 "><image src="/static/img/addCc/Container.png" mode="" style="width: 68rpx;height: 68rpx;"></image></view>
								<view class="flex-column mr22">
									<view class="flex">
										<view class="size_22 mr16">健身 跑步</view>
										<view class="size_18 color_5E">(10/30)</view>
									</view>
									<view class="flex mt4">
										<view class="size_18 mr30">铜鼓路附近</view>
										<view class="size_18">>400m 南山</view>
									</view>
									<view class="size_14 color_FF mt8">找几个志同道合的附近朋友一起跑步</view>
								</view>
								<view class="row1 flex-cen">
									<view class="flex">
										<u-icon name="plus" color="#fff" size="8"></u-icon>
										<view class="ml8 size_12 color_fff">加入</view>
									</view>
								</view>
							</view>
							<view class="flex mt18">
								<view class="flex mr72 ml30">
									<view class="" hover-class="animate__animated  animate__bounceIn">
										<image class="" src="/static/img/friendGroup/17.svg" mode="" style="width: 43rpx;height: 38rpx;"></image>
									</view>
									<view class="ml10 size_24 color_5E">452</view>
								</view>
								<view class="flex mr60">
									<u-icon name="chat-fill"></u-icon>
									<view class="ml10 size_24 color_5E">512</view>
								</view>
								<view class="flex">
									<image src="/static/img/friendGroup/15.svg" mode="" style="width: 46rpx;height: 37rpx;"></image>
									<view class="ml10 size_24 color_5E">320</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<!--朋友圈 -->
				<view class="ml24 mr30 mt14" v-if="show == 1">
					<!-- 1 -->
					<view class="flex mt40" v-for="(i, index) in friendsCircle1" :key="index">
						<view class="mr16"><image :src="i.userAvatar" mode="" style="width: 90rpx;height: 90rpx;"></image></view>
						<view class="flex-column">
							<view class="flex-start">
								<view class="size_28 mr24">{{ i.userNick || '默认用户' }}</view>
								<view class="size_28 color_5E mr300">{{ $u.timeFrom(i.ucreateTime, false) }}</view>
								<view class=""><image src="/static/img/friendGroup/14.svg" mode="" style="width: 42rpx;height: 19rpx;"></image></view>
							</view>
							<view class="flex-column mt10">
								<view class="size_24">{{ i.utitle }}</view>
								<view class="size_24 color_5E">定位：南山科技大厦附近</view>
							</view>
							<view class="mt20"><image :src="i.annexList[0] || '/static/img/friendGroup/45.svg'" mode="" style="width: 596rpx;height: 336rpx;"></image></view>
							<view class="flex mt14">
								<view class="flex mr72 ml30">
									<!-- $u.debounce -->
									<view v-if="i.isLike === true" class="" hover-class="animate__animated  animate__bounceIn" @click="noLike(i.uactivityId)">
										<!-- red -->
										<u-icon name="heart-fill" color="#fb4e5d"></u-icon>
										<!-- <image class="" src="/static/img/friendGroup/17.svg" mode="" style="width: 43rpx;height: 38rpx;"></image> -->
									</view>
									<view v-if="i.isLike === false" class="" hover-class="animate__animated  animate__bounceIn" @click="like(i.uactivityId)">
										<!-- black -->
										<u-icon name="heart"></u-icon>
										<!-- <image class="" src="/static/img/friendGroup/17.svg" mode="" style="width: 43rpx;height: 38rpx;"></image> -->
									</view>
									<view class="ml10 size_24 color_5E">{{ i.ulikeNum }}</view>
								</view>
								<view class="flex mr60">
									<u-icon name="chat-fill"></u-icon>
									<view class="ml10 size_24 color_5E">512</view>
								</view>
								<view class="flex">
									<image src="/static/img/friendGroup/15.svg" mode="" style="width: 32rpx;height: 32rpx;"></image>
									<view class="ml10 size_24 color_5E">320</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>

		<view class=""></view>
		<tabbar></tabbar>
		<view class=""></view>
	</view>
</template>

<script>
import { debounce } from '@/utils/lodash.js';
import {
	mapState, //先导入mapState方法
	mapMutations
} from 'vuex';
export default {
	data() {
		return {
			list1: [
				{
					name: '为你推荐'
				},
				{
					name: '朋友圈'
				}
			],
			show: '',
			friendGroupList: [],
			myFriendGroupList: [],
			recommendationlist: [],
			friendsCircle: [],
			time: null,
			timestamp: '1678498191818',

			aId: ''
		};
	},
	computed: {
		...mapState('user', ['userInfo']),
		friendsCircle1() {
			return [...this.friendGroupList, ...this.myFriendGroupList];
		}
	},
	onReady() {
		this.showToast();
	},
	// mounted() {
	// 	this.getFriendGroupList();
	// },
	onLoad() {
		this.time = uni.$u.timeFrom(this.timestamp);
	},
	onShow() {
		this.getRecommendationList();
		this.getFriendGroupList();
		this.getFriendGroupList_MyFriend();
	},
	methods: {
		addClass() {},
		async likeDe(id) {
			let re = await this.$API.trendsApi.like(this.aId);
			this.getFriendGroupList_MyFriend();
		},
		async noLikeDe(id) {
			let re = await this.$API.trendsApi.noLike(this.aId);
			this.getFriendGroupList_MyFriend();
		},
		/* yes */
		async like(id) {
			this.aId = id;
			try {
				console.log('like');
				uni.$u.throttle(this.likeDe, 1500);
			} catch (e) {
				console.log(e, 'err');
			}
		},
		/* no */
		async noLike(id) {
			this.aId = id;
			try {
				console.log('noLike');
				uni.$u.throttle(this.noLikeDe, 1500);
			} catch (e) {
				console.log(e, 'err');
			}
		},
		async getRecommendationList() {
			try {
				let re = await this.$API.trendsApi.recommendActivity();
				this.recommendationlist = re;
			} catch (e) {
				console.log(e, 'err');
			}
		},
		async getFriendGroupList() {
			try {
				// let re = await this.$api.get('/activity/activityApi/list/page/user');
				// this.friendGroupList = re.data.rows;
				let re = await this.$API.trendsApi.getFriendCircleActivity();
				this.friendGroupList = re;
			} catch (e) {
				console.log(e, 'err');
			}
		},
		async getFriendGroupList_MyFriend() {
			try {
				let re = await this.$API.trendsApi.getMyActivity();
				this.myFriendGroupList = re;
			} catch (e) {
				console.log(e, 'err');
			}
		},
		click(item) {
			console.log('item', item);
			this.show = item.index;
		},
		showToast(params) {
			this.$refs.uToast.show({
				title: '登录成功',
				type: 'success',
				position: 'top',
				message: '更新'
			});
		}
	}
};
</script>

<style lang="scss">
// ::v-deep .u-tabs__wrapper__nav {
// 	justify-content: space-between !important;
// }

::v-deep .u-tabs__wrapper__nav__item {
	padding: 0 60px !important;
}

::v-deep .u-tabs__wrapper__nav__line {
	// transform: translate(185.5px);
	// transform: translate(60px) !important;
}
.row {
	width: 454rpx;
	height: 132rpx;
	background: #f8f2ff;
	border-radius: 24rpx 24rpx 24rpx 24rpx;
	opacity: 1;
}
.row1 {
	width: 88rpx;
	height: 46rpx;
	background: #a054fe;
	border-radius: 42rpx 42rpx 42rpx 42rpx;
	opacity: 1;
}
</style>
